<template>
  <div>
<!--    <Button disabled  type="primary" @click="longdao = true" >增加主机</Button>-->
    <Drawer
        title="添加项目"
        v-model="longdao"
        width="700"
        :mask-closable="true"
        :styles="styles">
      <Form  ref="myForm" :model="formData"  :rules="ruleValidate">
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="主机名称" label-position="top"  prop="HostName">
              <Input v-model="formData.HostName" placeholder="输入主机名称" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="IP地址" label-position="top" prop="IP">
              <Input v-model="formData.IP" placeholder="输入IP地址" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="系统平台" label-position="top" prop="System">
              <Input v-model="formData.System" placeholder="输入系统平台" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="K8s版本" label-position="top" prop="K8s">
              <Input v-model="formData.K8s" placeholder="输入K8s版本" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="内核版本" label-position="top" prop="Kernel">
              <Input v-model="formData.Kernel" placeholder="输入内核版本" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="Docker版本" label-position="top" prop="Docker">
              <Input v-model="formData.Docker" placeholder="输入Docker版本" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="角色" label-position="top" prop="Role">
              <Input v-model="formData.Role" placeholder="输入角色" />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="longdao = false;" >取消</Button>
        <Button type="primary" @click="saveHostData">确定</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: 'AddHosts',
  inject: ['reload'],
  data() {
    return {
      longdao: false, //控制抽屉的显示和隐藏
      company: this.$route.query.company, // 获取company参数
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      formData: {
        HostName: '',
        IP: '',
        System: '',
        K8s: '',
        Kernel: '',
        Docker: '',
        Role: '',
      },
      ruleValidate: {
        MName: [{required: true, message: '主机名称不能为空', trigger: 'blur'}],
      }
    }
  },

  methods: {
    background(type) {
      this.$Message[type]({
        background: true,
        content: type === 'success' ? '添加成功' : '添加失败'
      });
    },
    saveHostData() {
      this.$refs['myForm'].validate((valid) => {
        if (valid) {
          axios.post(`http://172.30.53.223:8888/api/projectlist/addhosts?company=${this.company}`, this.formData)
              .then(() => {
                // 数据保存成
                this.background('success');
                this.longdao = false;
                this.$refs.myForm.resetFields();
                this.reload()
              })
              .catch(error => {
                // 处理错误
                console.error(error);
                this.background('error');
              });
        } else {
          // 表单验证不通过的逻辑
          return; // 阻止提交操作
        }
      });
    },
  }
}
</script>
<style>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
